<template>
  <div>
    <el-input placeholder="请输入商品名称" v-model="filterText" style="font-size: 16px;"></el-input>
    <el-tree class="filter-tree" :data="BrrData" :props="defaultProps" @node-click="handleNodeClick" default-expand-all :filter-node-method="filterNode" ref="tree" :render-content="renderContent"></el-tree>
    <!-- dialog -->
    <el-dialog title="B技能库" :visible.sync="dialogVisible" width="50%" style="height:100%;">
      <div v-for="item in Bskill" :label="item.skillName" :key="item.skillCode" style="float: left;">
        <el-button style="margin:1px 2px;" size="small" @click="aggre(item)">{{
          item.skillName
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "tree",
  props: ["BrrData"],
  data () {
    return {
      defaultProps: {
        children: "classifySubList",
        label: "classifyName"
      },
      isBaoCUN: false,
      dialogVisible: false,
      isactTitle: [],
      skillType: "",
      skillName: [],
      Bskill: [],
      skillList: [],
      filterText: "",
      isact: "",
      skillType: "",
      curNode: undefined //当前选中节点
    };
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val);
    }
  },
  created () {
    this.dataList();
  },
  methods: {
    filterNode (value, data) {
      // console.log(data)
      if (!value) return true;
      return data.classifyName.indexOf(value) !== -1;
    },
    //列表
    dataList () {
      this.$http({
        url: "/staffadmin/staff/skill/fetchAllSkill",
        method: "get"
      }).then(res => {
        // console.log(res.data)
        this.Bskill = res.data.filter(item => {
          return item.skillType === "B";
        });
        // console.log(this.Bskill);
      });
    },
    // 优化
    handleNodeClick (pdata) {
      this.curNode = pdata;
      document
        .getElementsByClassName("el-tree-node__content")[0]
        .setAttribute("class", "el-tree-node__content");
    },
    //技能库
    aggre (e) {
      this.skillList.skillName = e.skillName;
      this.isactTitle = e.skillName;
      this.skillCode = e.skillCode;
      this.dialogVisible = false;
    },
    //底层代码
    renderContent (h, { node, data, store }) {
      return (
        <span style="width:100%; display: flex; align-items: center; justify-content: space-between; padding-right: 8px;">
          <span style="width:100%; display: flex; align-items: center; justify-content: space-between;">
            <span class="left">{node.label}</span>
            <span>
              <span class="right">
                {data.goodsCode !== this.goodsCode && this.isBaoCUN == false ? (
                  <input class="input-default" on-click={() => this.handleChangeTitle(data, this.dialogVisible = true)} value={data.skillName} readonly="readonly"
                  ></input>
                ) : data.goodsCode !== this.goodsCode && this.isBaoCUN == true ? (
                  <input class="input-default" on-click={() => this.handleChangeTitle(data, this.dialogVisible = true)} value={data.skillName} readonly="readonly"
                  ></input>
                ) : (
                  <span></span>
                )}
                {data.goodsCode !== this.goodsCode ? (
                  <el-button style="background-color:#fd804c;color: #fff;" on-click={() => this.updateGroup(node, data, this.isactTitle)}> 保存
                  </el-button>
                ) : (
                  <span></span>
                )}
              </span>
            </span>
          </span>
        </span>
      );
    },
    //输入框
    handleChangeTitle (data) {
      this.skillList = data
      this.isBaoCUN = true;
    },
    //保存
    updateGroup (node, data) {
      this.isBaoCUN = false;
      if (this.isactTitle == "") {
        this.$message.warning("名称不能为空");
        return;
      }
      //修改数据组
      this.isUpdateGroup = false;
      const parent = node.parent;
      const children = parent.data.classifySubList || parent.data;
      const index = children.findIndex(d => d.goodsCode === data.goodsCode);
      let temp = data;
      temp.skillName = this.isactTitle;
      children.splice(index, 1, temp);

      this.$http({
        url: "/hssgoodsadmin/skill/reBindingSkill",
        method: "post",
        data: {
          goodsCode: data.goodsCode,
          skillCode: this.skillCode,
          skillName: temp.skillName,
          skillType: "B"
        }
      }).then(res => {
        console.log(res);
        this.$message({
          message: "保存成功",
          type: "success"
        });
        this.isactTitle = ''
        // location.reload()
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-input {
  margin-top: 10px;
}
.el-tree {
  margin-top: 10px;
}
.el-tree /deep/ .bagfist {
  display: block;
}
.el-tree /deep/ .el-button--default {
  padding: 4px 12px;
  color: #fff;
  background-color: #409eff;
  margin-left: 15px;
}
.el-tree /deep/ .input-default {
  margin-left: 15px;
}
/deep/ .el-dialog__body {
  padding-top: 0px;
  height: 330px;
}
</style>
